<template>
  <a-radio-group v-model:value="state.value" @change="handlerChange">
    <a-radio :value="yes">男</a-radio>
    <a-radio :value="no">女</a-radio>
  </a-radio-group>
</template>
<script setup>
import { reactive, watch } from "vue";
/**
 * props
 */
const props = defineProps({
  val: {
    type: [String, Number],
    default: "",
  },
  yes: {
    type: [Number, String],
    default: 1,
  },
  no: {
    type: [Number, String],
    default: 0,
  },
});
/**
 * emit
 */
const emit = defineEmits(["update:val"]);
/**
 * state
 */
const state = reactive({
  value: "",
});

const handlerChange = (value) => {
  emit("update:val", state.value);
};

watch(
  () => props.val,
  (val) => {
    state.value = val;
  },
  { immediate: true }
);
</script>
<style lang="scss" scoped></style>
